import React, { useState, useEffect } from 'react'
import { Table, Button, Popconfirm, Pagination,Select,Tag } from 'antd'
import { $list,$del } from '../../api/roomApi';
import { $list as $typeList } from '../../api/typeApi';
import { $list as $stateList } from '../../api/stateApi';
import AddRome from './AddRoom';
import MyNotification from '../../components/MyNotification/MyNotification';
export default function Room() {
    let [typeList,setTypeList]=useState([])
    let [stateList,setStateList]=useState([])
    const loadTypeList=()=>{
        $typeList().then((data)=>{
            console.log(data)
            data=data.map((r)=>{
                return{
                    value:r.roomTypeId,
                    label:r.roomTypeName
                };
            });
            data.unshift({value:0,label:'请选择房型'})
            setTypeList(data);
        })
    }
    const loadStateList=()=>{
        $stateList().then((data)=>{
            data=data.map((r)=>{
                return {
                    value:r.roomStateId,
                    label:r.roomStateName
                }
            })
            data.unshift({value:0,label:'请选择房间状态'})
            setStateList(data);
        })
    }
    let [roomTypeId,setRoomTypeId]=useState(0)
    let [roomStateId,setRoomStateId]=useState(0)
    let [count, setCount] = useState(1)
    let [pageIndex, setPageIndex] = useState(1)

    let [roomList, setRoomList] = useState([])
    const [open, setOpen] = useState(false);
    let [roomId, setRoomId] = useState(0)
    let [notiMsg, setNotiMsg] = useState({ type: '', description: '' })
    useEffect(() => {
        loadTypeList()
        loadStateList()
        loadList()
    }, [pageIndex]);
    const loadList = () => {
        $list({roomTypeId,roomStateId, pageSize:2, pageIndex }).then(({ data, count }) => {
            console.log(data)
            data = data.map(r => {
                return {
                    ...r,
                    key: r.roomId,
                    roomTypeName:r.roomType.roomTypeName,
                    roomTypePrice:r.roomType.roomTypePrice,
                    bedNum:r.roomType.bedNum,
                    roomStateName:r.roomState.roomStateName,
                }
            })

            setRoomList(data)
            setCount(count)
        })
    }
    const edit = (roomId) => {

        setOpen(true)
        setRoomId(roomId)
    }
    const del = (roomId) => {
        $del({roomId}).then(({ success, message }) => {
            if (success) {
                setNotiMsg({ type: 'success', description: message })
                loadList()
            } else {
                setNotiMsg({ type: 'error', description: message })
            }
        })

    }
    const columns = [
        {
            title: '房间编号',
            dataIndex: 'roomId',
        },
        {
            title: '房间类型',
            dataIndex: 'roomTypeName',
        },
        {
            title: '房间价格',
            dataIndex: 'roomTypePrice',
        },
        {
            title: '床位数量',
            dataIndex: 'bedNum',
        },
        {
            title: '房间状态',
            dataIndex: 'roomStateName',
            render: (roomStateName) => (
                <Tag color={roomStateName==='空闲'?'lightgreen':(roomStateName==='维修'?'lightsalmon':'lightpink')}>
                {roomStateName}
              </Tag>
              ),
        },
        {
            title: '操作',
            key: 'action',
            render: (ret) => {
                return (
                    ret.roomStateName==='入住'?null:<>
                <Button size='small' style={{ borderColor: 'orange', color: 'orange' }} onClick={() => {
                    edit(ret.roomId)
                }}>编辑</Button>
                <Popconfirm
                    title="提示"
                    description="确定删除吗?"
                    onConfirm={() => { del(ret.roomId) }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button size='small' danger style={{ marginLeft: '5px' }} >删除</Button>
                </Popconfirm>
            </>
                )
            }
               

            ,
        },
    ];
    return (
        <>
            <div className='search'>
                <span>房型：</span>
                <Select size="small" style={{width:'100px'}}
                    options={typeList} defaultValue={0} onSelect={(value)=>{setRoomTypeId(value)}}
                ></Select>
                <span style={{marginLeft:'5px'}}>状态：</span>
                <Select size="small" style={{width:'100px'}}
                    options={stateList} defaultValue={0} onSelect={(value)=>{setRoomStateId(value)}}
                ></Select>
                <Button type="primary" style={{marginLeft:'5px'}} size="small" onClick={loadList}>查询</Button>
                <Button style={{marginLeft:'8px'}} size="small" onClick={() => { setOpen(true) }}>
                    添加
                </Button>
            </div>
            <Table size="small" dataSource={roomList} columns={columns} pagination={false} />
            <Pagination size="small" defaultCurrent={pageIndex} total={count} pageSize={2} onChange={(page) => { setPageIndex(page) }} />
            <AddRome open={open} setOpen={setOpen} loadList={loadList} roomId={roomId} setRoomId={setRoomId}/>
            <MyNotification notiMsg={notiMsg} />
        </>
    )
}
